<template>
    <view class="couponCenter">
        <Navigation title="领券中心" :titleColor="titleColor" :isSeat="false" :background="background" />
        <image
            :src="getBaseUrl() + '/admin-api/system/file/19/get/5afb6a8798679e18ae20bdf194bc759de57385a31ed4dac1d1d7268840bd35d2.png'"
            class="w-f h-516"
        ></image>
        <view class="content b-24 ph-32 pb-32 pt-12">
            <view v-for="(item, index) in list" :key="index" @click="receiveTap(item)">
                <!-- <view class="fs-35 fw-600 text-color4 mt-20">商城券</view> -->
                <view class="w-686 h-212 list f mt-20">
                    <view class="w-202 h-212 left">
                        <image
                            :src="getBaseUrl() + '/admin-api/system/file/19/get/23fe45455d13d2659448450ac4c6386c53c89b517d154c9cd221945761edeafd.png'"
                            class="w-f h-202"
                        ></image>
                        <!-- 1, "满减" 2, "折扣" -->
                        <view class="price f fd-c ai-c jc-c" v-show="item.discountType == 1">
                            <view class="fs-72 fw-600 text-color5">{{ item.discountPrice }}</view>
                            <view class="mt-22 fs-24 text-color5">满{{ item.usePrice }}元可用</view>
                        </view>
                        <view class="price f fd-c ai-c jc-c" v-show="item.discountType == 2">
                            <view class="fs-72 fw-600 text-color5 f"
                                >{{ item.discountPercent }}<view class="fs-24 fw-400 text-color5 f ai-f-e zhe ml-4">折</view></view
                            >
                            <view class="mt-22 fs-24 text-color5">无门槛</view>
                        </view>
                    </view>
                    <view class="f f1 ml-24 jc-s-b pr-32 ai-c">
                        <view class="mr-24 f f1 fd-c">
                            <view class="fs-32 fw-600 text-color4">{{ item.name }}</view>
                            <view class="fs-24 text-color6 mt-8">限“猫猫和狗狗的粮食”购买服务使用</view>
                            <view class="fs-20 text-color3 mt-12">{{ item.validStartTime }}-{{ item.validEndTime }}</view>
                        </view>
                        <view class="w-144 h-56 fs-26 text-color5 f ai-c jc-c b-56 btn">{{item.canTake==false?'已领取':'立即领券'}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { onShow, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { couponTemplatePage, couponTake } from '@/services/api/index/cupon';
import { getBaseUrl } from '@/utils/env';
const { proxy } = getCurrentInstance();
const list = ref<any[]>([]);
const background = ref('none');
const titleColor = ref('#fff');
const listParams = ref({
    pageNo: 1,
    pageSize: 10,
});
onShow(() => {
    list.value = [];
    listParams.value.pageNo = 1;
    getList();
});
//领取优惠券
async function receiveTap(data: any) {
    await couponTake({ templateId: data.id });
    uni.showToast({
        title: '领取成功',
    });
    setTimeout(() => {
        list.value = [];
        listParams.value.pageNo = 1;
        getList();
    }, 1000);
}
async function getList() {
    const { data } = await couponTemplatePage(listParams.value);
    uni.stopPullDownRefresh();
    if (data.list.length > 0) {
        data.list.forEach((item: any) => {
            item.discountPercent = item.discountPercent;
            item.validStartTime = proxy.$moment(item.validStartTime).format('YYYY.MM.DD');
            item.validEndTime = proxy.$moment(item.validEndTime).format('YYYY.MM.DD');
        });
    }
    list.value = list.value.concat(data.list);
}
onPageScroll((e) => {
    if (e.scrollTop < 250) {
        background.value = 'none';
        titleColor.value = '#fff';
    } else {
        background.value = '#fff';
        titleColor.value = '#1a1a1a';
    }
});
//下拉刷新
onPullDownRefresh(() => {
    list.value = [];
    listParams.value.pageNo = 1;
    getList();
});
//上拉加载
onReachBottom(() => {
    listParams.value.pageNo++;
    getList();
});
</script>
<style lang="scss" scoped>
.couponCenter {
    .zhe {
        position: relative;
        bottom: 15rpx;
    }
    .list {
        background: #f5f5f5;
        .left {
            position: relative;
        }
        .price {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .btn {
            background: #fabb3c;
        }
    }
    .content {
        position: relative;
        top: -32rpx;
        background: #fff;
    }
}
</style>
